<template>
  <div class="container">
    <el-row>
      <el-col class="topTitle">
        <div>
          <!--  <el-dropdown>-->
          <i class="icon iconfont iconfanhui1" @click="goBack"></i>
          <span class="titleStyle">
            {{ projectName }}
            <!--<i class="el-icon-caret-bottom"></i>-->
          </span>
          <span class="startStatus">{{ projectStatusDesc }}</span>
        </div>
      </el-col>
    </el-row>
    <div class="mainCon">
      <template v-for="(info, index) in infos">
        <template v-if="index == 0">
          <el-row :key="index">
            <el-col :span="24" class="subTitleBox">
              <div class="secondaryTitle secondaryTitleTheme">
                首次参保
                <el-link class="modify fr" @click="modifyInsurance(info.id)"
                  >去修改 >></el-link
                >
              </div>
            </el-col>
          </el-row>
        </template>
        <template v-else-if="index == 1">
          <el-row :style="{ marginTop: '18px' }" :key="index">
            <el-col :span="24" class="subTitleBox">
              <div class="secondaryTitle secondaryTitleTheme">
                二次参保
                <el-link class="modify fr" @click="modifyInsurance(info.id)"
                  >去修改 >></el-link
                >
              </div>
            </el-col>
          </el-row>
        </template>
        <template v-else>
          <el-row :style="{ marginTop: '18px' }" :key="index">
            <el-col :span="24" class="subTitleBox">
              <div class="secondaryTitle secondaryTitleTheme">
                {{ (index + 1) | numFormat }}次参保
                <el-link class="modify fr" @click="modifyInsurance(info.id)"
                  >去修改 >></el-link
                >
              </div>
            </el-col>
          </el-row>
        </template>
        <el-row class="insuranceBox" :key="index">
          <el-col :span="24">
            <el-row class="detailInfoItemSty">
              <el-col :span="8" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >受理机构：</span
                >
                <span class="gridContent empContentSty color666 fontSizeF">{{
                  info.bureau || '--'
                }}</span>
              </el-col>
              <el-col :span="8" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >单位编号：</span
                >
                <span
                  class="gridContent empContentSty color666 fontSizeF ellipsis"
                  :title="info.insNo"
                  >{{ info.insNo || '--' }}</span
                >
              </el-col>
              <el-col :span="8" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >参保时间：</span
                >
                <span class="gridContent empContentSty color666 fontSizeF">{{
                  info.insDate || '--'
                }}</span>
              </el-col>
            </el-row>
            <el-row class="detailInfoItemSty">
              <el-col :span="8" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >参保人数：</span
                >
                <span
                  v-if="info.total > 0"
                  class="gridContent empContentSty color666 fontSizeF"
                  style="transform: translateY(-1px)"
                  ><el-link
                    type="primary"
                    style="line-height: 16px !important"
                    @click="showEmployeeList(info.id)"
                    >{{ info.total || '0' }}人</el-link
                  ></span
                >
                <span
                  v-else
                  class="gridContent empContentSty color666 fontSizeF"
                  style="transform: translateY(-1px)"
                  >{{ info.total || '0' }}人</span
                >
              </el-col>
              <el-col :span="8" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >参保单位：</span
                >
                <span class="gridContent empContentSty color666 fontSizeF">{{
                  info.companyName || '--'
                }}</span>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="24">
            <el-row class="detailInfoItemSty">
              <div class="el-col-9 labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >{{ title }}：</span
                >

                <span
                  v-if="info.fileList"
                  class="gridContent empContentSty color666 fontSizeF"
                >
                  <span>已上传</span>
                  <el-link class="seeFile" @click="toUploadFile(info.fileList)"
                    >查看</el-link
                  >
                </span>

                <span
                  v-else
                  class="gridContent empContentSty color666 fontSizeF"
                  >未上传</span
                >
              </div>
            </el-row>
          </el-col>
        </el-row>
      </template>
    </div>
    <el-dialog
      title="参保人员明细"
      :visible.sync="dialogFormVisible"
      width="900px"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :append-to-body="true"
    >
      <div>
        <el-row>
          <el-form
            :inline="true"
            class="mrT8"
            :model="filterField"
            ref="searchConditions"
          >
            <el-form-item
              label="姓名"
              label-width="42px"
              class="row-padding-bottom"
            >
              <el-input
                type="text"
                v-model="filterField.searchText"
                placeholder="请输入姓名或身份证号"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item style="margin-left: 8px">
              <el-button
                type="primary"
                icon="icon iconfont iconchazhao1"
                @click="searchList"
                class="searchBtn"
              >
                <span>搜索</span>
              </el-button>
            </el-form-item>
          </el-form>
        </el-row>
        <el-table
          :data="tableList"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          style="border: 1px solid #dfe6ec"
          ref="multipleTable"
        >
          <el-table-column
            prop="name"
            label="姓名"
            width="120"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="idcard"
            label="身份证号码"
            width="200"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="sex"
            label="性别"
            width="80"
            align="center"
          ></el-table-column>
          <!-- <el-table-column prop="address" label="户口所在地"  min-width="100" align="center"></el-table-column>  -->
          <el-table-column prop="address" label="户口所在地" width="230">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.address"
                :columnName="'address'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="tel"
            label="电话号码"
            width="160"
            align="center"
          >
            <template slot-scope="scope">
              <p>{{ scope.row.tel || '--' }}</p>
            </template>
          </el-table-column>
        </el-table>
        <!-- getTableList为获取子组件的数据 -->
        <el-col :span="24" class="toolbar" style="text-align: right">
          <el-pagination
            style="margin-top: 20px"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 30]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="currentTotal"
          >
          </el-pagination>
        </el-col>
      </div>
    </el-dialog>
    <contractEnclosureDialog
      v-if="uploadContract"
      :dialogTitle="title"
      :tableData="tableData"
      @closeDialog="hiddenDialog"
    ></contractEnclosureDialog>
  </div>
</template>
<script>
import common from '../../kits/common'
export default {
  name: 'insuranceList',
  data() {
    return {
      id: '',
      projectName: '',
      title: '保单回执',
      //表格数据
      tableList: [],
      requestUrl: 'api-e/cs/insdetail/insemployeepage',
      dialogFormVisible: false,
      currentPage: 1,
      pageSize: 5,
      currentTotal: 0,
      isShow: false, //列表加载
      // loading: true, //列表loading
      canLogin: false, //保存loading
      infos: [],
      filterField: {
        searchText: '',
        insId: '',
      },
      projectStatus: '', //开工状态
      uploadContract: false,
      tableData: [],
      projectStatusDesc: '',
    }
  },
  created() {
    this.getData()
    if (this.isCzUser()) {
      this.title = '完税证明'
    }
    console.log('00000')
  },
  activated() {
    console.log('2222')
    this.getData()
  },
  methods: {
    getData() {
      //从其他页面跳详情默认tab为工伤保险一级列表
      if (this.$route.query.type == 'insuranceDetail') {
        this.$store.commit('set_active_index', '/home/insurance/insuranceList')
        this.$store.state.activeMenu = '/home/insurance/insuranceList'
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/insurance/insuranceList',
          newUrl: this.$router.currentRoute.fullPath,
        })
      }
      this.id = this.$route.query.id
      this.projectName = this.$route.query.projectName
      this.projectStatus = this.$route.query.projectStatus
      this.projectStatusDesc = this.$route.query.projectStatusDesc
      this.getDetail(this.id)
    },
    getDetail(id) {
      this.axios({
        method: 'post',
        url: 'api-e/cs/ins/expand/inslist',
        data: {
          projectId: id,
        },
      })
        .then((response) => {
          this.infos = response.data.result
        })
        .catch((error) => {
          this.$message.error('数据获取失败')
        })
    },
    addInsurance() {
      this.$router.push({ name: 'addInsurance' })
    },
    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    showEmployeeList(id) {
      this.filterField.searchText = ''
      this.filterField.insId = id
      this.searchList()
      this.dialogFormVisible = true
    },
    searchList() {
      this.axios({
        method: 'POST',
        url: 'api-e/cs/insdetail/expand/insemployeepage',
        data: {
          pageNo: this.currentPage,
          pageSize: this.pageSize,
          searchText: this.filterField.searchText,
          insId: this.filterField.insId,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            // this.tableList = response.data.result.results;
            if (response.data.result.results) {
              this.tableList = response.data.result.results
              this.currentTotal = response.data.result.total
            } else {
              this.tableList = []
            }
          }
        })
        .catch((error) => {
          this.$message.error('数据获取失败')
        })
    },
    modifyInsurance() {
      this.$router.push({ name: 'addInsurance' })
    },
    goBack() {
      this.$router.push({ path: '/home/insurance/insuranceList' })
      this.$store.commit('GOBACK_NAME', {
        oldUrl: '/home/insurance/insuranceList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.searchList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.searchList()
    },
    toUploadFile(tableData) {
      this.tableData = tableData
      this.uploadContract = true
    },
    hiddenDialog() {
      this.uploadContract = false
    },
    modifyInsurance(id) {
      this.$router.push({
        path: '/home/insurance/editInsurance',
        name: 'editInsurance',
        query: {
          insId: id,
          id: this.id,
          projectId: this.$route.query.projectId,
          projectName: this.projectName,
          fromPath: 'editInsurance',
          projectStatus: this.projectStatus,
          projectStatusDesc: this.projectStatusDesc,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/insurance/insurance',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
  },
}
</script>

<style scoped lang="less">
.topTitle {
  height: 50px;
  // background-color: #e4ebf1;
  padding-left: 24px;
  padding-right: 24px;
  font-weight: bold;
  font-size: 18px;
  line-height: 50px;
  div {
    height: 50px;
    width: 100%;
    position: relative;
    &:after {
      position: absolute;
      right: -24px;
      top: 50px;
      left: -24px;
      height: 1px;
      content: '';
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
      background-color: #e3e7e9;
      z-index: 10;
    }
  }
  .titleStyle {
    color: #333;
    font-size: 22px;
    .el-icon-caret-bottom {
      color: #71818e;
    }
  }
  /* 开工状态 */
  .startStatus {
    display: inline-block;
    width: 48px;
    height: 20px;
    line-height: 20px;
    margin-bottom: 1px;
    background: #009588;
    color: #fff;
    text-align: center;
    font-size: 12px;
    vertical-align: text-bottom;
    // border-radius: 4px;
  }
  .StartOver {
    background: #657282;
  }
  .noStart {
    background: #ffc100;
  }
  .startStop {
    background: #d9544f;
  }
  .saveBtn {
    margin-right: 24px;
    margin-top: 15.5px;
  }
}
.mainCon {
  padding: 0;
  height: calc(100% - 50px);
  .subTitleBox {
    padding: 20px 24px 0;
    position: relative;
    &::after {
      content: '';
      width: 100%;
      height: 1px;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
      background-color: #e3e7e9;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 10;
    }
  }
  .title {
    position: relative;
    padding-left: 20px;
    height: 37px;
    font-size: 16px;
    border-bottom: 2px solid #f5f7fa;
    &::before {
      position: absolute;
      content: '';
      width: 4px;
      height: 16px;
      left: 0;
      top: 3px;
      background: #265faa;
    }
    .modify {
      line-height: 16px;
      font-size: 14px;
    }
  }
  .insuranceBox {
    margin: 4px 0 0 38px;
    font-size: 14px;
    .insuranceDetail {
      .el-row {
        margin-bottom: 16px;
      }
      .el-col {
        margin-bottom: 6px;
      }
      .content {
        color: #2a2a2a;
      }
    }
    .picBox {
      margin-right: 12px;
      .picStyle {
        width: 80px;
        height: 80px;
        .imgStyle {
          width: 100%;
          height: 100%;
        }
      }
      .picTipStyle {
        text-align: center;
      }
    }
  }
}
/deep/ .el-dialog__footer {
  background: #fff;
  padding-bottom: 70px;
}

.nav ul {
  list-style: none;
}

.nav li {
  display: block;
  float: left;
}
.goBack {
  display: block;
  width: 136px;
  margin: 60px auto 0 auto;
}
.labelWidth {
  font-size: 14px;
  color: #000;
  display: inline-block;
  height: 36px;
  float: left;
}
.information {
  font-size: 14px;
  color: #666;
  display: block;
  width: 75%;
}
.el-link {
  line-height: 16px !important;
}
</style>
